// 存购票相关的数据（出发地、目的地、乘车时间、是否只看高铁动车）
import dayjs from 'dayjs'

// 1. 导入创建切片的函数
import { createSlice } from '@reduxjs/toolkit'

// 2. 调用步骤1导入的函数，创建切片
const ticketSlice = createSlice({
  name: 'ticket', // 每个切片的 name 必须唯一，不能重复
  // 初始值
  initialState: {
    start: '北京', // 出发地
    end: '上海', // 目的地
    date: dayjs().format('YYYY-MM-DD'), // 乘车日期
    isSpeed: false, // 是否只看高铁/动车
    // 搜索历史
    searchHistory: []
  },
  // 这里程序员可以自定义方法，修改当前切片中的全局数据
  reducers: {
    // 交互出发地和目的地
    exchangeCity(state) {
      const temp = state.start // 中间变量，存储出发地
      state.start = state.end
      state.end = temp
    },
    setIsSpeed(state, action) {
      state.isSpeed = action.payload
    },
    setDate(state, action) {
      state.date = dayjs(action.payload).format('YYYY-MM-DD')
    },
    // 把用户点击的城市，存入全局
    // action.payload 是提交过来的数据，这个数据的格式为  { propName: 'end', city: '城市的名字' }
    setCity(state, action) {
      // JS 开发大型项目所存在的必然的问题
      // TS 可以有非常完备的代码智能提示，能够避免单词写错或属性可选值写错的问题！
      state[action.payload.propName] = action.payload.city
    },
    // 清空搜索历史记录
    clearSearchHistory(state) {
      state.searchHistory = []
    },
    // 添加搜索历史
    addSearchHistory(state, action) {
      // 数组的去重和排序
      console.log(state.searchHistory)
      state.searchHistory.unshift(action.payload)
      const set = new Set(state.searchHistory)
      state.searchHistory = Array.from(set)
    }
  }
})

// 3. 把步骤2创建的切片，导出，供 src/store/index.js 模块进行数据的集成
// 请注意：这里不是直接把切片导出，而是导出切片的 reducer
export default ticketSlice.reducer
// 把函数，向外导出
export const {
  exchangeCity,
  setIsSpeed,
  setDate,
  setCity,
  clearSearchHistory,
  addSearchHistory
} = ticketSlice.actions
